.dv-spaceship {
  /*
   * Detail view
   */
  .detail-view img.view-bg {
    position: absolute;
    opacity: 0.9;
  }

  .detail-view-masker {
    pointer-events: none;

    .layout-focused & {
      background: rgba(0, 0, 0, 0.5);
      backdrop-filter: blur(15px);
      -webkit-backdrop-filter: blur(15px);
    }

    .layout-focused-out & {
      background: rgba(0, 0, 0, 0);
    }

    // animation
    @include dv-keyframes(detail-view-masker-animation) {
      0% {
        background: rgba(0, 0, 0, 0.5);
        backdrop-filter: blur(15px);
        -webkit-backdrop-filter: blur(15px);
      }
      100% {
        background: rgba(0, 0, 0, 0);
        backdrop-filter: blur(0);
        -webkit-backdrop-filter: blur(0);
      }
    }

    .layout-focusing & {
      @include dv-animation(detail-view-masker-animation $animation-duration);
      @include dv-animation-reverse();
    }

    .layout-focusing-out & {
      @include dv-animation(detail-view-masker-animation $animation-duration);
    }
  }
}
